import { Tag} from 'antd'
import React, {useState, useEffect, memo} from 'react'
import {connect} from 'umi'
import styles from './index.less'
import CustomTable from '@/components/Table'
import {histryList} from '@/service/carMessage/insurance'
import {buyType} from '../../../dict'

const standbyAdd = memo((props: any) => {
	const {id} = props.data
	const [params, setParams] = useState({
		current: 1,
		size: 10,
	})

	const [total, setTotal] = useState(0)
	const [loading, setLoading] = useState(false)
	const [tableList, setTableList] = useState<any[]>([])
	const columns: any = [
		{
			title: 'VIN',
			dataIndex: 'vin',
			align: 'center',
			width: 200,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '车牌号',
			dataIndex: 'carPlateNo',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '保险公司',
			dataIndex: 'insuranceCompanyName',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '购买类型',
			dataIndex: 'buyType',
			align: 'center',
			width: 140,
			render: (text: number, record: any) => (
				<>
					{text ? (
						<span>
							{buyType?.map(
								(item: {key: number; label: string}) => {
									if (item?.key === text) {
										return (
											<Tag
												color="processing"
												key={record?.id}>
												{item?.label}
											</Tag>
										)
									}
									return ''
								},
							)}
						</span>
					) : (
						'--'
					)}
				</>
			),
		},
		{
			title: '被保人',
			dataIndex: 'insured',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '保单号',
			dataIndex: 'buyInsuranceNo',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '保费',
			dataIndex: 'totalFee',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '保险日期',
			dataIndex: 'insuranceStartTime',
			align: 'center',
			width: 380,
			render: (
				text: string,
				record: {insuranceStartTime: string; insuranceEndTime: string},
			) => (
				<span>
					{record?.insuranceStartTime || '--'} ~
					{record?.insuranceEndTime || '--'}
				</span>
			),
		},
		{
			title: '出单日期',
			dataIndex: 'insuranceOrderTime',
			align: 'center',
			width: 200,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '出险NCD系数',
			dataIndex: 'ncdCoefficient',
			align: 'center',
			width: 140,
			render: (text: string) => <span>{text || '--'}</span>,
		},
	]

	// 获取车辆滴滴订单数据
	const onIsListFun = () => {
		setLoading(true)
		histryList({
			...params,
			carId: id,
		})
			.then((res: any) => {
				if (res?.success) {
					setTableList(() => res?.data?.records)
					setTotal(res?.data?.total)
				}
				setLoading(false)
			})
			.catch(() => {
				setLoading(false)
			})
	}

	useEffect(() => {
		onIsListFun()
	}, [params])
	return (
		<div className={styles.admittanceAdd}>
			<div className={`${styles.content} ${styles.formDetils}`}>
				<CustomTable
					columns={columns}
					pagination
					total={total}
					params={params}
					callback={(pagination: any) => {
						setParams(pagination)
					}}
					loading={loading}
					dataSource={tableList}
				/>
			</div>
		</div>
	)
})
export default connect(({user}: any) => ({user}))(standbyAdd)
